<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../css/responsive.css?v=2025">
    <link rel="stylesheet" href="../element/theme-default/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">-->
    <script type="text/javascript">
        document.write("<link rel='stylesheet' href='../css/index.css?v=" + Math.random() + "'>");
    </script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../element/index.js"></script>
	<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
	    document.write("<script type='text/javascript' src='../js/prototype.js?v=" + Math.random() + "'><\/script>");
	</script>
    <!--[if lt IE 9]>
    <script src="../js/html5shiv.min.js"></script>
    <script src="../js/respond.min.js"></script>
    <![endif]-->
	<style>
		.wrap{padding:0.22rem 0.3rem;}
		.el-table td, .el-table th{padding:0.12rem 0;}
		.el-table th, .el-table tr{color:#00FFC4;}
		.detail_data .el-table tr:hover{color:#00FFC4;}
		.detail_data .el-table__body-wrapper .el-table__row:hover> td{background: #292929 ;}
		.detail_data .el-table__body-wrapper .el-table__row--striped:hover> td{background:rgba(0,255,196,0.2);}
		.el-table--striped .el-table__body tr.el-table__row--striped td{background:rgba(0,255,196,0.2);color:#fff;}
		.el-table td, .el-table th.is-leaf{border:none;}
		.el-table--border::after, .el-table--group::after, .el-table::before{background-color: transparent;}
		.el-table__header-wrapper thead .cell{font-size: 0.22rem; font-weight: 500;}
		.risk_table .el-table th{background:rgba(15,73,68,1);}
		.risk_table{position: relative;}
		.fiexd_thead{position: absolute;top: 0;left: 0;z-index: 100; width:100%;height:0.52rem;line-height:0.52rem;font-size: 0.22rem;font-weight: 500;color:#fff;display: flex;justify-content: space-between;background-color: rgba(15,73,68,1);}
		.fiexd_thead div,.fiexd_tbody div{width:2.3rem;text-align: center;}
		.fiexd_tbody{position: absolute;top: 0.52rem;left: 0;z-index: 50;width:100%;height:2.6rem;overflow-y: auto;}
		.fiexd_tbody li{width:100%;height:0.52rem;line-height:0.52rem;font-size: 14px;color:#00FFC4;display: flex;justify-content: space-between;}
	</style>
</head>
<body>
<div class="wrap" v-cloak v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在加载中，请稍后！">
    <!-- <div class="add_box">
        <span>车辆里程分析</span>
    </div> -->
	<ul class="total_data">
		<li>
			<div class="total_icon">
				<div><img src="../images/vehicle.png" ></div>
				<span>入网车辆总数</span>
			</div>
			<p>{{tripStaticVoList.totalvehiclenum}}</p>
		</li>
		<li>
			<div class="total_icon">
				<div><img src="../images/wifi.png" ></div>
				<span>在线车辆数</span>
			</div>
			<p>{{tripStaticVoList.totalonlinenum}}</p>
		</li>
		<li>
			<div class="total_icon">
				<div><img src="../images/mileage.png" ></div>
				<span>总行驶里程</span>
			</div>
			<p>{{tripStaticVoList.totalmiles}}<b>km</b></p>
		</li>
		<li>
			<div class="total_icon">
				<div><img src="../images/time.png" ></div>
				<span>总行驶时长</span>
			</div>
			<p>{{tripStaticVoList.totalhours}}<b>h</b></p>
		</li>
	</ul>
	<ul class="detail_data">
		<li class="alarm_trend">
			<div class="detail_data_tilte">
				<div><img src="../images/alarm.png" ></div>
				<span>百公里告警趋势</span>
			</div>
			<div class="alarm_left">
				<div>
					<span>X轴：</span>
					<b>时间（月）</b>
				</div>
				<div>
					<span>Y轴：</span>
					<b>百公里平均告警次数</b>
				</div>
			</div>
			<div id="charts_line"></div>
		</li>
		<li class="high_risk_event">
			<div class="detail_data_tilte">
				<div><img src="../images/shield.png" ></div>
				<span>高风险事件分布情况</span>
			</div>
			<div id="charts_pie"></div>
		</li>
		<li>
			<div class="detail_data_tilte">
				<div><img src="../images/grade.png" ></div>
				<span>综合驾驶评分榜</span>
			</div>
			<div class="homepage_table">
				<el-table ref="multipleTable" :data="gradeTableData" style="width: 100%" stripe>
				    <el-table-column type="index" width="120" label="排名" ></el-table-column>
				    <el-table-column prop="equipmentNo" label="设备编号" ></el-table-column>
				    <el-table-column prop="score" label="综合驾驶评分" ></el-table-column>
				</el-table>
			</div>
		</li>
		<li>
			<div class="detail_data_tilte">
				<div><img src="../images/warning.png" ></div>
				<span>极高风险车辆预警</span>
			</div>
			<div class="homepage_table risk_table">
				<div class="fiexd_thead">
					<div>设备编号</div>
					<div>行程开始时间</div>
					<div>行程总时长</div>
					<div>总告警次数</div>
				</div>
				<ul class="fiexd_tbody">
					<li v-for="item in riskTableData" >
						<div>{{item.equipmentNo}}</div>
						<div>{{item.startTime}}</div>
						<div>{{item.totalHours}}</div>
						<div>{{item.totalNum}}</div>
					</li>
				</ul>
				<!-- <el-table ref="multipleTable" :data="riskTableData" style="width: 100%" >
				    <el-table-column prop="equipmentNo" label="设备编号" ></el-table-column>
				    <el-table-column prop="startTime" label="行程开始时间" ></el-table-column>
				    <el-table-column prop="totalHours" label="行程总时长" ></el-table-column>
				    <el-table-column prop="totalNum" label="总告警次数" ></el-table-column>
				</el-table> -->
			</div>
		</li>
	</ul>
</div>
<!--<script src="../js/prototype.js?v=2229"></script>-->
<script src="../js/echarts4.0/echarts.min.js"></script>
<script>
	var _this='';
    var myControl=new Vue({
        el:".wrap",
        data:{
            fullscreenLoading:false,
			lineCharts:'',
			pieCharts:'',
			tripStaticVoList:{
				totalvehiclenum:0,
				totalonlinenum:0,
				totalmiles:0,
				totalhours:0
			},
			gradeTableData:[],
            riskTableData:[]
        },
        methods:{
            getData:function(){
                this.getTripStaticVoList();//首页总设备数，在线设备数，总里程，总行驶时长
                this.getWarningTrend();//近六个月百公里告警趋势
                this.getAlarmNum();//高风险事件分布情况
                this.getTTripStaticsTotalList();//综合驾驶评分榜
                this.getTTripListByIndex();//极高风险车辆预警
				setInterval(function(){
					_this.getTripStaticVoList();
				},60000)
            },
			//首页总设备数，在线设备数，总里程，总行驶时长
			getTripStaticVoList(){
				$.ajax({
				    type: 'GET',   //POST/PUT/DELETE/HEAD...
				    url:globalUrl+"/index/getTripStaticVoList",
				    beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
				    data:'',
				    dataType: 'json',	//text/script/xml/json/jsonp
				    // contentType:"application/json; charset=UTF-8",
				    success: function (data) {
				        if(data.code===0){
							if(data.data){
								_this.tripStaticVoList=data.data;
								_this.tripStaticVoList.totalvehiclenum=_this.tripStaticVoList.totalvehiclenum+18000;
								_this.tripStaticVoList.totalonlinenum=_this.tripStaticVoList.totalonlinenum+4000;
								_this.tripStaticVoList.totalmiles=_this.tripStaticVoList.totalmiles+5000000;
								_this.tripStaticVoList.totalhours=_this.tripStaticVoList.totalhours+200000;
							}
							
				        }else{
				            // _this.$message(data.message);
				        }
				    }
				});
			},
			//综合驾驶评分榜
			getTTripStaticsTotalList(){
				$.ajax({
				    type: 'GET',   //POST/PUT/DELETE/HEAD...
				    url:globalUrl+"/index/getTTripStaticsTotalList",
				    beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
				    data:'',
				    dataType: 'json',	//text/script/xml/json/jsonp
				    // contentType:"application/json; charset=UTF-8",
				    success: function (data) {
				        if(data.code===0){
							_this.gradeTableData=data.data;
				        }else{
				            // _this.$message(data.message);
				        }
				    }
				});
			},
			//极高风险车辆预警  
			getTTripListByIndex(){
				$.ajax({
				    type: 'GET',   //POST/PUT/DELETE/HEAD...
				    url:globalUrl+"/index/getTTripListByIndex",
				    beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
				    data:'',
				    dataType: 'json',	//text/script/xml/json/jsonp
				    // contentType:"application/json; charset=UTF-8",
				    success: function (data) {
				        if(data.code===0){
							_this.riskTableData=data.data;
							var _data=JSON.parse(JSON.stringify(data.data));
							var len=data.data.length;
							var _top=0.52;
							var index=0;
							// setInterval(function(){
							// 	_top=_top-0.52;
							// 	index++;
							// 	if(index%5==3){
							// 		_this.riskTableData=_this.riskTableData.concat(_data);
							// 	}
							// 	$('.fiexd_tbody').animate({
							// 		top:_top+'rem'
							// 	})
							// },2000);
							
				        }else{
				            // _this.$message(data.message);
				        }
				    }
				});
			},
			//高风险事件分布情况
			getAlarmNum(){
				$.ajax({
				    type: 'GET',   //POST/PUT/DELETE/HEAD...
				    url:globalUrl+"/index/getAlarmNum",
				    beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
				    data:'',
				    dataType: 'json',	//text/script/xml/json/jsonp
				    // contentType:"application/json; charset=UTF-8",
				    success: function (data) {
				        if(data.code===0){
							setTimeout(function(){
								_this.loadPieChart(data.data);
							},300);
							
				        }else{
				            // _this.$message(data.message);
				        }
				    }
				});
			},
			//近六个月百公里告警趋势
			getWarningTrend(){
				$.ajax({
				    type: 'GET',   //POST/PUT/DELETE/HEAD...
				    url:globalUrl+"/index/getWarningTrend",
				    beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
				    data:'',
				    dataType: 'json',	//text/script/xml/json/jsonp
				    // contentType:"application/json; charset=UTF-8",
				    success: function (data) {
				        if(data.code===0){
							setTimeout(function(){
								_this.loadLineChart(data.data);
							},300);
				        }else{
				            // _this.$message(data.message);
				        }
				    }
				});
			},
			//加载折线图
			loadLineChart(warningTrend){
				this.lineCharts = echarts.init(document.getElementById('charts_line'));
				var legendData=[],seriesData=[];
				$.each(warningTrend,function(key,val){
					legendData.push(val.month);
					seriesData.push(val.hundredNum);
				});
				var option = {
					textStyle:{
					    color:'#eee'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					axisPointer:{
						label:{
							backgroundColor:'rgba(20,20,20,0.7)'
						}
					},
					grid: {
					    left:'60px',
					    right: '40px',
					    top:'6%',
					    bottom:'30px'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLine: {
						    lineStyle: {
						        color: '#eee'
						    }
						},
						splitLine: {
							show: false
						},
						data:legendData
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false
						},
						axisLine: {
						    lineStyle: {
						        color: '#eee'
						    }
						}
					},
					series: [{
						data: seriesData,
						itemStyle:{
						    color:"#517FA9"
						},
						lineStyle:{
							color:'#B2DD62'
						},
						type: 'line',
						areaStyle: {}
					}]
				};
				this.lineCharts.setOption(option);
			},
			loadPieChart(alarmData){
				this.pieCharts = echarts.init(document.getElementById('charts_pie'));
				var colorList=['#FF513F',  '#16DDFF', '#FF8F6E','#4FFFAD', '#44BBFF', '#C91818','#F5683D'];
				var legendData=[],seriesData=[];
				$.each(alarmData,function(key,val){
					legendData.push(val.alarmName);
					var obj={
						value:val.alarmNum,
						name:val.alarmName
					}
					seriesData.push(obj);
				});
				var option = {
				    tooltip: {
				        trigger: 'item',
				        formatter: '{a} <br/>{b}: {c} ({d}%)'
				    },
				    legend: {
				        orient: 'vertical',
				        left: 10,
						top:'22%',
						textStyle:{
							color:'#fff'
						},
				        data: legendData
				    },
				    series: [
				        {
				            name: '高风险事件分部情况',
				            type: 'pie',
				            radius: ['50%', '70%'],
							center: ['60%', '50%'],
				            avoidLabelOverlap: false,
				            label: {
								formatter: '{b|{b}：}{d}%  ',
								backgroundColor: 'rgb(36, 36, 36)',
								borderColor: 'rgba(64,240,255,0.6)',
								borderWidth: 1,
								borderRadius: 4,
								padding: [1, 4],
								rich: {
									hr: {
										borderColor: '#aaa',
										width: '100%',
										borderWidth: 0.5,
										height: 0
									},
									b: {
										fontSize: 14,
										lineHeight: 20
									},
									per: {
										color: '#eee',
										backgroundColor: '#334455',
										padding: [2, 2],
										borderRadius: 2
									}
								}
							},
							itemStyle: {
							    color: function(params) {
							        return colorList[params.dataIndex]
							    }
							},
				            data:seriesData
				        }
				    ]
				};

				this.pieCharts.setOption(option);
			},
            //获取tbody里的数据
            getTbodyData:function(){
                var _this=this;
                _this.tableData=[];//  清空table的值
                $.ajax({
                    type: 'get',   //POST/PUT/DELETE/HEAD...
                    url:globalUrl+"/cloud/getTTripList",
                    // beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
                    data:'',
                    dataType: 'json',	//text/script/xml/json/jsonp
                    // contentType:"application/json; charset=UTF-8",
                    success: function (data) {
                        _this.tableData=data.data.list.slice(0,5);
                    }
                });
            }
        },
        mounted:function(){
			_this=this;
            this.getData();
        }
    });
	window.onresize=function(){
		if(myControl.lineCharts){
			myControl.lineCharts.resize();
		}
		if(myControl.pieCharts){
			myControl.pieCharts.resize();
		}
	};
</script>
</body>
</html>